We’re using cookies, but you can turn them off in Privacy Settings. Otherwise, you are agreeing to our use of cookies. Accepting cookies does not mean that we are collecting personal data. Learn more in our Privacy Policy .

Benefits List

Basic icon (default color) + title + description

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

Outlined icon (WCAG-safe brand color) + title + description

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

Solid icon (WCAG-safe brand color) + linked title + description

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

Solid icon (WCAG-safe brand color) + title + description

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

Basic icon (WCAG-safe brand color) + title + description

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

HTML

<section class="grid-container"> 
    <ul class="benefits-list full-width">
        <li class="benefits-list-item">
            <div class="benefits-list-item-icon-container">
                <span class="cfaicon-lookUpSpecificIconName"></span>
            </div>
            <p class="benefits-list-item-title h4">Benefits Title Here</p>
            <p>Description text goes here.</p>
        </li>
        <li class="benefits-list-item">
            <div class="benefits-list-item-icon-container">
                <span class="cfaicon-lookUpSpecificIconName"></span>
            </div>
            <p class="benefits-list-item-title h4"><a href="#">Benefits Title Here</a"></p>
            <p>Description text goes here.</p>
        </li>
        <li class="benefits-list-item">
            <div class="benefits-list-item-icon-container">
                <span class="cfaicon-lookUpSpecificIconName"></span>
            </div>
            <p class="benefits-list-item-title h4">Benefits Title Here</p>
            <p>Description text goes here.</p>
        </li>
    </ul>
</section>

Problem Being Solved

We need to display a short list of benefits in a way that showcases them.

When to Use and Best Practices

  • Benefits are intended specifically to list advantages or marketing points for a specific audience.
  • Benefit items work best in sets of three or six. Limit the total number of items in a set to six or less.
  • Stick to WCAG-safe colors for icons. All primary brand colors meet this requirement.
  • Keep titles and descriptions consise.
  • Be consistent with whatever combination works best for your needs. (Ex: Varying the icon type [solid, outline, standalone] or color within a set should be avoided. Linking some titles and not others should also be avoided.)

When Not to Use

  • Benefits should not be used for long chunks of content, or for non-benefit-specific information.
  • AVOID varying combinations and icon colors/styles within sets — for example:

    • Benefits Title Here

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

    • Benefits Title Here

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

Formatting

Place benfits-list in a <section class="grid-container">.

Use our brand icons and follow the documentation noted to achieve your desired results.